<template>
    <v-chart :option="setOption()" autoresize class="left" ></v-chart>
</template>

<script setup lang="ts">
import { computed } from "vue";
import useEchartStore from '@/stores/echart'
const echartStore = useEchartStore();
const props = defineProps<{
    activeIndex: string
}>()
const setOption = () => {
    return {
        title:{
            text: props.activeIndex == '1' ? '销售趋势': '访问趋势',
            textStyle: {
                fontSize: 14
            },
            top: 15
        },
        xAxis: {
            show: true,
            data: props.activeIndex == '1' ? orderFullYearAxis.value : userFullYearAxis.value
        },
        yAxis: {
            show: true
        },
        series: {
            name: '销售额',
            type: 'bar',
            barWidth: '30%',
            data: props.activeIndex == '1' ? orderFullYear.value : userFullYear.value
        },
        tooltip: {
            trigger: 'item'
        },
        grid: {
            top: 60,
            bottom: 60,
            left: 40,
            right: 40
        }     
    }
}

const orderFullYearAxis = computed(() => {
    return echartStore.echartData.orderFullYearAxis
})
const orderFullYear = computed(() => {
    return echartStore.echartData.orderFullYear
})
const userFullYearAxis = computed(() => {
    return echartStore.echartData.userFullYearAxis
})
const userFullYear = computed(() => {
    return echartStore.echartData.userFullYear
})
</script>

<style scoped>
.left {
    height: 300px;
    
}


</style>